{{ extend "base.html" }}

{{ block head_ex }} 
<style type="text/css">
   #copylink.active { background-color:#aaa; }
</style>

<script type="text/javascript" src="{{=url_for_static('js/jquery.blockUI.js')}}"></script>
<script type="text/javascript" src="/static/zeroclipboard/ZeroClipboard.js"></script>
<script type="text/javascript">

$(document).ready(function() {
     ZeroClipboard.setMoviePath( '/static/zeroclipboard/ZeroClipboard.swf' );
     var clip = new ZeroClipboard.Client();
     
     clip.addEventListener( 'mouseDown', function(client) { 
            clip.setText( "{{=gallery_settings.baseurl}}/showimage/{{=photo.id}}/" );
            } );
     clip.glue("copylink");
     
		var bind_delete = function()
		{
			$(".deletecoment").click(function() {
			var commentid = $(this).attr('name').replace('delete','');
			$.getJSON("{{=gallery_settings.baseurl}}/admin/ajaxaction/?action=deletecomment",
                    { 'commentid': commentid},
                  	  function(json){ 
	                  		if(json.result == 'ok')
	                  		{
	                  			buildcomments(json.comments);
	                  		}
	                  		else
	                  		{
	                  			alert('{{=_("error") }}: '+json.msg);
	                  		}
						});	
			return false;
			});
		};
		bind_delete();
		
{{ if users.is_admin(): }}
		$("#setcover").click(function() {
			$.getJSON("{{=gallery_settings.baseurl}}/admin/ajaxaction/?action=setcoverphoto",
                    { 'photoid': {{=photo.id}},
                      'albumid': {{=photo.album.id}}},
                      function(json){ 
                            if(json.result == 'ok')
                            {
                                alert('{{=_("Cover Photo Saved") }}');
                            }
                            else
                            {
                                alert('{{=_("error") }}: '+json.msg);
                            }
                        });     
		});
		 
		$("#desp_admin").click(function() {
			$("#desp_admin").hide();
			$("#despcontent").html(($("#desp_admin").html().replace(/(^\s*)|(\s*$)/g, "")));
			$("#despeditor").show();	    
        }); 
        $("#despcancel").click(function() {
			$("#desp_admin").show();
			$("#despeditor").hide();	    
        });
        $("#despsubmit").click(function() {
        	var old_desp = $("#desp_admin").html().replace(/(^\s*)|(\s*$)/g, "");
			$("#desp_admin").show();
			$("#despeditor").hide();
			$("#desp_admin").html('{{=_("photo description is saving...") }}')
			$.getJSON("{{=gallery_settings.baseurl}}/admin/ajaxaction/?action=savephotodesp",
                    { 'photoid': {{=photo.id}},
                      'description': $("#despcontent").val()},
                  	  function(json){ 
	                  		if(json.result == 'ok')
	                  		{
	                  			$("#desp_admin").html(json.description);
	                  		}
	                  		else
	                  		{
	                  			alert('{{=_("error") }}: '+json.msg);
	                  			$("#desp_admin").html(old_desp);
	                  		}
						});	    
        });
{{ pass }}  

		var buildcomments  = function(comments) {
			$("#comment_container").html('');
			$.each( comments, function(i,comment){
	        	var comment_div = $('<div id="comment_entry" name="comment'+comment.id+'"></div>');
	                  				
	       		var p = $('<p>'+(i+1)+'. '+comment.author+' {{ =_( "posted on" ) }} '+ comment.date + '</p>');
	       		if(comment.admin)
	       		{
	       		  var ins = $('<ins class="deletecoment" name="delete'+comment.id+'"> {{=_( "Delete" ) }}</ins>');
	       		  p.append(ins);
	       		}
				comment_div.append(p);
				var h3 = $('<h3> <p>'+ (comment.content) +'</p></h3>');
				comment_div.append(h3);
				$("#comment_container").append(comment_div);
			});
			bind_delete();
		};
		     
        $("#addcomment").click(function() {
			$("#addcomment2").show();
		});
        
        $("#submitcomment").click( function() {
        	var comment = $("#comment_content").val().replace(/(^\s*)|(\s*$)/g, "");
        	if(comment.length <=0 )
        	{
        		alert('{{=_( "Pls input content" )}}!');
        		return false;
        	}
        	if(comment.length > 500 )
        	{
        		alert('{{=_( "comment can not over 500 chars") }}!');
        		return false;
        	}
        	var author = $("#comment_author").val().replace(/(^\s*)|(\s*$)/g, "");
        	if(author.length <= 0)
        	{
        		alert('{{=_( "Pls input your name") }}');
        		return false;
        	}
        	$.blockUI({message: '<h1>{{=_("comment is saving...") }}</h1>', 
		                css: { border: '1px solid #60a0c0',width:"500px" } 
		           	});	
		    $.getJSON("{{=gallery_settings.baseurl}}/admin/ajaxaction/?action=addcomment",
                    { 'photoid': {{=photo.id}},
                      'author': $("#comment_author").val(),
                      'comment_content' :  $("#comment_content").val() },
                  	  function(json){ 
                  	  		$.unblockUI();
	                  		if(json.result == 'ok')
	                  		{
	                  			buildcomments(json.comments);
	                  		}
	                  		else
	                  		{
	                  			alert('{{=_("error") }}: '+json.msg);
	                  		}
						});
			return false;
        });	
}); 
</script>
{{ end }}

{{ block commandbar }}
		<li>|</li>
        <li><a href="/showslider/{{=album.name}}/">{{=_( "Slide Show") }}</a></li>
        {{ if users.is_admin(): }}
        <li>|</li>
        <li><a href="/admin/delphoto/{{=photo.id}}">{{=_("Delete this photo") }}</a></li> 
        <li>|</li>
        <li><a href="#" id="setcover">{{=_("Set as Cover Photo") }}</a></li> 
        {{ pass }}
{{ end }}
   
{{ block page }}
<div id="page">
        <!-- start content -->
        <div id="content">
             <div id="photo">
                <a href="/showimage/{{=photo.id}}/" target="_blank"><img src="/showimage/{{=photo.id}}/"/></a>
                <div id="description">
                	{{ if users.is_admin(): }}
                		<div id="desp_admin">
                	    {{ if photo.description: }}
                	    	{{<<(photo.description)}}
                	    {{ else: }}
                	    	{{=_("add description") }}
                	    {{ pass }}
                	    </div>
                	    <div id="despeditor" style="display: none;">
							<textarea id="despcontent" rows="2">{{=photo.description}}</textarea>
							<div>
							<input type="button" value="{{=_('save') }}" name="{{=_('save') }}" id="despsubmit"/>
							<input type="button" value="{{=_('cancel') }}" name="{{=_('cancel') }}" id="despcancel"/>
							</div>
						</div> 
                	{{ else: }}
                	{{<<(photo.description)}}
                	{{ pass }}
				</div>
             </div>
             <div id="slider">
	             <div id="photo_nav">
	             	<div>
	             	 {{ if prevphoto: }}
		             <a href="/{{=album.name}}/{{=prevphoto.name}}"><img src="/thumb/{{=prevphoto.id}}.png"/></a>
		             {{ pass }}
	             	 <img src="/thumb/{{=photo.id}}.png" class="selected"/>
	             	 {{ if nextphoto: }}
		             <a href="/{{=album.name}}/{{=nextphoto.name}}"><img src="/thumb/{{=nextphoto.id}}.png"/></a>
		             {{ pass }}
		            </div>
		            <div> 
	             	 {{ if prevphoto: }}
		             <a href="/{{=album.name}}/{{=prevphoto.name}}">{{=_('Prev photo') }}</a> 
		             {{ pass }} 
		             {{=current}}/{{=total}}  
		             {{ if nextphoto: }}
		             <a href="/{{=album.name}}/{{=nextphoto.name}}">{{=_('Next photo') }}</a>
		             {{ pass }} 
		            </div> 
	             </div>
	             <div id="information">
		             <table>
		             <tr><td>{{=_('Filename') }}:</td><td><div id="filename">{{=photo.name}}</div></td></tr>
		             <tr><td>{{=_('Owner') }}:</td><td>{{=photo.owner}}</td></tr>
		             <tr><td>{{=_('Type') }}:</td><td>{{=photo.contenttype}}</td></tr>
		             <tr><td>{{=_('Dimensions') }}:</td><td>{{=photo.width}}x{{=photo.height}}</td></tr>
		             <tr><td>{{=_('Size') }}:</td><td>{{=photo.size}}</td></tr>
		             <tr><td>{{=_('Date updated') }}:</td><td>{{=photo.updatedate.strftime("%Y-%m-%d %H:%M")}} GMT</td></tr>
		             <tr><td>{{=_('Web address') }}:</td><td><input value="{{=gallery_settings.baseurl}}/showimage/{{=photo.id}}/" type="text" /></td></tr>
                             <tr><td></td><td><input type="button" id="copylink" value="{{=_('Copy Photo Link') }}"/></td></tr>
		             </table>
	             </div>
             </div>
             <div id="comment">
             <form method="post" id="comment_form">
             <div id="addcomment">{{=_('click me to post comment(most 500 chars)') }}:</div>
             <div id="addcomment2" style="display:none;">
             {{ cur_user = users.get_current_user()}}
             {{if cur_user:}}
             {{ cur_user=cur_user.nickname()}}
             {{else:}}
             {{ cur_user=''}}
             {{pass}}
             <div>{{=_('name') }}: <input name="comment_author" id="comment_author" value="{{=cur_user}}" type="text" /> 
             
             <button id="submitcomment">{{=_('submit') }}</button></div>
             <div><textarea name="comment_content" id="comment_content" rows="4" maxlength="500"></textarea></div>
             </div>
             </form>
             <div id="comment_container">
             {{ counter = 0 }}
             {{ for comment in photo.Comments: }}
                {{ counter += 1 }}
             	<div id="comment_entry" name="comment{{=comment.id}}">
                	<p>{{=counter}}.  {{=comment.author}} {{=_('posted on') }} {{=comment.date.strftime("%Y-%m-%d %H:%M")}} GMT 
                	{{ if users.is_admin(): }} <ins name="delete{{=comment.id}}" class="deletecoment"> {{=_('Delete') }}</ins> {{pass}}</p>
        			<h3> {{<<(ccutils.ccBreakLines(comment.content))}}</h3>
        		</div>
             {{ pass }}
             </div>
             </div>
         </div>
        <!-- end content -->
    <div style="clear: both;">&nbsp;</div>
</div>
{{ end }}